<template>
	<view>
		<view class="header">
			<view class="top">
				找房
			</view>
			<view class="nav"></view>
		</view>
		<view class="box">
			<view class="con">
				<div class="title">
					帮我找房
				</div>
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<view class="yx">
						<span class="icon"></span>
						<uni-forms-item name="text">
							<uni-easyinput v-model="valiFormData.text" placeholder="请输入意向城市、区域、意向楼盘" />
						</uni-forms-item>
					</view>
					<view class="user">
						<uni-forms-item name="name">
							<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<span class="berf"></span>
						<uni-forms-item name="phone">
							<uni-easyinput v-model="valiFormData.phone" placeholder="请输入手机号" />
						</uni-forms-item>
					</view>
				</uni-forms>
				<view class="anq">
					<span class="yes" v-if="isAnquan"></span>
					<span class="no" v-else></span>隐私保护已开启
				</view>
				<view class="but">
					<button @click="submit('valiForm')">发布需求</button>
				</view>
				<view class="guwen">
					当前有 {{ brokerlist.length }} 位置业顾问为您服务
				</view>
			</view>
			<view class="btm">
				<view class="btm-item" @click="myClick(index)" v-for="(item, index) in Jiugongge" :key="index"
					:style="item.bg">
					<view class="btm-item-left">
						<view class="btm-item-left-top">
							{{ item.title }}
						</view>
						<view class="btm-item-left-bom" :style="item.sizecolor">
							{{ item.con }}<uni-icons type="forward" size="12" :color="item.color"></uni-icons>
						</view>
					</view>
					<view class="btm-item-right">
						<image :src="item.img" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request';
export default {
	data() {
		return {
			isAnquan: true,
			valiFormData: {
				text: '',
				name: '',
				phone: '',
			},
			Jiugongge: [{
				title: '新房',
				con: '热门新楼盘',
				color: '#FB8085',
				img: 'http://10.31.71.52:7002/public/static/Zhaofangimg/xinfang.jpg',
				bg: 'background:#F6F3EB',
				sizecolor: 'color:#FB8085'
			},
			{
				title: '地图找房',
				con: '查看附近好房源',
				color: '#68CCF7',
				img: 'http://10.31.71.52:7002/public/static/Zhaofangimg/ditu.jpg',
				bg: 'background:#F2F4F7',
				sizecolor: 'color:#68CCF7'
			},
			{
				title: '置业顾问',
				con: '优选置业顾问',
				color: '#34CDAE',
				img: 'http://10.31.71.52:7002/public/static/Zhaofangimg/geren.jpg',
				bg: 'background:#EBF3F5',
				sizecolor: 'color:#34CDAE'
			},
			{
				title: '楼市圈',
				con: '楼市最新动态',
				color: '#FAD468',
				img: 'http://10.31.71.52:7002/public/static/Zhaofangimg/xinxi.jpg',
				bg: 'background:#F9F6F2',
				sizecolor: 'color:#FAD468'
			}
			],
			// 校验规则
			rules: {
				text: {
					rules: [{
						required: true,
						errorMessage: '请输入您的意向房源'
					}]
				},
				name: {
					rules: [{
						required: true,
						errorMessage: '请输入姓名'
					}, {
						format: 'string',
						errorMessage: '姓名必须是汉字'
					},]
				},
				phone: {
					rules: [{
						required: true,
						errorMessage: '请输入手机号'
					}, {
						format: 'number',
						errorMessage: '手机号只能输入数字'
					}, {
						pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
						errorMessage: '手机号格式不正确'
					}]
				}
			},
			brokerlist: [],
		};
	},
	onShow: function () {
		const _this = this;
		uni.request({
			url: "http://10.31.71.52:7002/api/v1/broker",
			method: 'GET',
			data: {
				"currentPage": "1",
				"pageSize": "1000"
			},
			success: function (res) {
				console.log(res.data);
				if (res.data.code === 1) {
					res.data.data.forEach((item) => {
						if (item.status !== '离职') {
							_this.brokerlist.push(item)
						}
					})
				}
			}
		})
	},
	methods: {
		submit(ref) {
			this.$refs[ref].validate().then(res => {
				console.log('success', res);
				this.isAnquan = false;
			}).catch(err => {
				console.log('err', err);
			})
		},
		myClick: (index) => {

			switch (index) {
				case 0:
					uni.navigateTo({
						url: '/subpkg/buyhouse/buyhouse',
					});
					break;
				case 1:
					uni.navigateTo({
						url: '/subpkg/map/map',
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/subpkg/broker/broker',
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/subpkg/property/property',
					});
					break;

				default:
					break;
			}
		},
	}
}
</script>

<style lang="scss">
.header {
	width: 100%;
	height: 150px;

	.top {
		width: 100%;
		height: 80px;
		background: #309CFD;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.nav {
		width: 100%;
		height: 70px;
		background: #309CFD;
	}
}

.con {
	display: flex;
	flex-direction: column;
	width: 90%;
	height: 300px;
	background: #fff;
	position: absolute;
	overflow: hidden;
	top: 110px;
	left: 18px;
	border-radius: 20px;
	box-shadow: 0px -3px 5px 0px rgba(0, 0, 0, 0.2),
		-3px 0px 3px 0px rgba(0, 0, 0, 0.2),
		3px 0px 3px 0px rgba(0, 0, 0, 0.2),
		0px 3px 10px 0px rgba(0, 0, 0, 0.2);

	.title {
		width: 100%;
		height: 50px;
		font-size: 14px;
		background: linear-gradient(to bottom, #FDDCDD, #FDE2E2, #FCF1F0);
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		color: #FF676C;
	}

	.yx {
		width: 95%;
		height: 40px;
		display: flex;
		margin: 0 auto;
		align-items: center;
		margin-bottom: 20px;

		.uni-easyinput__content {
			border: none;
			height: 30px;
			width: 300px;
			border-bottom: 1px solid #ccc;
			border-radius: 0;
		}

		.uni-forms-item {
			margin: 0;
		}

		.icon {
			display: inline-block;
			width: 20px;
			height: 20px;
			background: url('http://10.31.71.52:7002/public/static/Zhaofangimg/bi.png') no-repeat;
			background-size: cover;
		}
	}

	.user {
		width: 95%;
		height: 30px;
		display: flex;
		margin: 0 auto;
		align-items: center;
		border-bottom: 1px solid #ccc;
		margin-bottom: 15px;

		.uni-forms-item {
			margin: 0;
		}

		.berf {
			display: inline-block;
			width: 1px;
			height: 90%;
			background: #ccc;
		}

		.uni-easyinput__content {
			border: none;
			height: 30px;
			width: 160px;
			border-radius: 0;
		}
	}

	.anq {
		width: 90%;
		height: 30px;
		margin: 0 auto;
		font-size: 10px;
		font-weight: 800;
		color: #707070;
		display: flex;
		align-items: center;

		.yes,
		.no {
			display: inline-block;
			width: 20px;
			height: 20px;
			background: blue;
		}

		.yes {
			background: url('http://10.31.71.52:7002/public/static/Zhaofangimg/anq2.png')no-repeat;
			background-size: cover;
		}

		.no {
			background: url('http://10.31.71.52:7002/public/static/Zhaofangimg/anq1.png')no-repeat;
			background-size: cover;
		}
	}

	.but {
		width: 96%;
		height: 45px;
		margin: 0 auto;
		border-radius: 5px;
		margin-top: 10px;
		margin-bottom: 12px;

		button {
			border-radius: 5px;
			width: 100%;
			height: 100%;
			background: #FF666E;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
		}
	}

	.guwen {
		width: 96%;
		height: 30px;
		border: 2px solid #FF666E;
		margin: 0 auto;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 14px;
		color: #FF666E;
	}
}

.btm {
	display: flex;
	width: 90%;
	height: 150px;
	margin: 0 auto;
	margin-top: 280px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	.btm-item {
		width: 49%;
		height: 45%;
		display: flex;


		.btm-item-left {
			width: 60%;
			height: 100%;
			font-size: 10px;
			display: flex;
			flex-direction: column;

			.btm-item-left-top {
				width: 100%;
				height: 20px;
				font-size: 16px;
				display: flex;
				justify-content: center;
				margin-top: 10px;
				margin-bottom: 5px;
			}

			.btm-item-left-bom {
				width: 100%;
				display: flex;
				justify-content: center;
			}
		}

		.btm-item-right {
			width: 40%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 80%;
				height: 80%;
			}
		}
	}



	view {
		width: 49%;
		height: 45%;
		border-radius: 5px;
	}
}
</style>